<template>
    <view id="scroll" class="category-head-mutli">
        <!-- @scrolltolower="lower" -->
        <!-- v-if="reload" -->
        <scroll-view v-if="reload" :refresher-triggered="refresherTriggered" @refresherrefresh="refresherrefresh"
            @scrolltolower="scrolltolower" scroll-x @scroll="handleCategory" @touchend="touchend">
            <view class="scroll-wrap">
                <view class="category-head-mutli-item">
                    <navigator v-for="item in categoryHeadMutli" :key="item.id">
                        <image mode="widthFix" :src="item.icon"></image>
                        <text>{{ item.name }}</text>
                    </navigator>
                </view>
            </view>
        </scroll-view>
        <view class="scroll-bar">
            <view class="scroll-bar-inner" :style="{ transform: `translateX(${scrollLeft})` }"></view>
        </view>
    </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
    props: ["categoryHeadMutli"],
    computed: {
        ...mapState(["safeArea"]),
    },
    data() {
        return {
            scrollLeft: 0,
            scrollLeftTotal: 0,
            // 重载滑动菜单
            reload: true,
            refresherTriggered:false
        };
    },
    methods: {
        scrolltolower(){
            console.log('到底');
        },
        refresherrefresh(){
            console.log('下拉刷新');
        },

        touchend(e) {
            // console.log(e);
            // this.scrollLeftTotal += this.scrollLeft2
            // console.log('总滑动量',this.scrollLeftTotal);
            // // console.log(this.scrollLeftTotal >= this.safeArea.width);
            // if (this.scrollLeftTotal >= this.safeArea.width/2) {
            //     console.log('到底了');
            //     this.lower()
            // }

        },
        lower(e) {
            this.reload = false
            this.scrollLeft0 = 0
            this.scrollLeft2 = 0
            this.scrollLeftTotal = 0
            this.$nextTick(function () {
                // console.log('nextTick', this);
                this.reload = true
            });
        },
        handleCategory(e) {
            // // 当用户滑动模块 滑动了屏幕的宽度的距离时候
            // // 底下 小模块 绿色- 滑动了自身的宽度100%
            // //  1 获取到当前用户滑动的距离 e.detail.scrollLeft
            // //  2 获取到当前屏幕的宽度 375  this.safeArea.width

            // // 3 当 滑动距离为0的时候   获得比例 0  0%
            // // 4 当 滑动距离为1的时候   获得比例 1  100%
            // // 5 css  元素设置 位移属性  div translateX(100%) 自身的宽度来计算
            // 375:50 = e.detail.scrollLeft :scrollLeft
            // 50:375 = scrollLeft :e.detail.scrollLeft
            // this.scrollLeft = 50 / 2 / 375 * e.detail.scrollLeft + "px"

            console.log('滑动',e.detail.scrollLeft);// 可以获取到当前用户滑动的距离
            const distance = e.detail.scrollLeft / this.safeArea.width; // 获取到用户滑动距离的 比例 小数
            // // 转成百分比
            this.scrollLeft = distance * 100 + "%";
            this.scrollLeft2 = e.detail.scrollLeft

            // console.log(this.scrollLeft);
            // if (e.detail.scrollLeft >= 375) {
            //     const ele = uni.createSelectorQuery().in(this).select('#scroll').boundingClientRect(ele => {
            //     }).exec();;
            // }
        },
    },
};
</script>

<style lang="scss">
.category-head-mutli {
    background-color: #f7f7f8;
    position: relative;
    padding-bottom: 30rpx;

    .scroll-wrap {
        width: 200%;
    }

    .category-head-mutli-item {
        width: 50%;
        display: flex;
        flex-wrap: wrap;

        navigator {
            text-align: center;
            width: 20%;
            padding: 15rpx;

            image {
                width: 100rpx;
                display: block;
                margin: 0 auto;
            }

            text {
                font-size: 26rpx;
                color: #666;
            }
        }
    }

    .scroll-bar {
        position: absolute;
        bottom: 15rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 100rpx;
        height: 8rpx;
        background-color: #e2e2e2;
        z-index: 200;

        .scroll-bar-inner {
            width: 50%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            background-color: #00c09b;
        }
    }
}
</style>